<template>
    <div>
        <div id="container" ref="containerRef"></div>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import * as THREE from 'three';

// 轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"


// 定义容器的引用
const containerRef = ref(null);

// 在组件挂载后执行的代码
onMounted(() => {
    // 获取容器元素
    const container = containerRef.value;

    // 如果找不到容器元素，则在控制台输出错误信息并返回
    if (!container) {
        console.error('Container element not found');
        return;
    }

    // 创建场景
    const scene = new THREE.Scene();




    // 创建透视摄像机
    const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);

    // 创建渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(container.clientWidth, container.clientHeight);




    //添加轨道控制器
    const controls = new OrbitControls(camera, renderer.domElement)
    //设置带阻尼的惯性
    controls.enableDamping = true
    //设置阻尼系数，惯性的大小
    controls.dampingFactor = 0.05
    //设置自动旋转
    controls.autoRotate = true
    //更新
    controls.update()


    // 创建一个立方体的几何体
    const geometry = new THREE.BoxGeometry();

    // 创建一个基础网格材质
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const material2 = new THREE.MeshBasicMaterial({ color: "red" });
    // 用几何体和材质创建一个网格对象
    const cube = new THREE.Mesh(geometry, material);
    const cube2 = new THREE.Mesh(geometry, material2);

    cube2.position.set(-3, 0, 0)
    cube.position.set(3, 0, 0)

    // 缩放
    cube2.scale.set(2, 2, 2)

    console.log(cube.position.distanceTo(cube2.position), '物体之间的距离')
    scene.add(cube);
    scene.add(cube2);



    // 设置摄像机位置
    camera.position.z = 5;
    // 将渲染器的 canvas 元素添加到容器中
    container.appendChild(renderer.domElement);
    scene.background = new THREE.Color(0xf0f0f0); // 设置场景背景色为浅灰色


    // 看的方向 
    camera.lookAt(0, 0, 0)
    //添加世界坐标辅助器
    const axesHelper = new THREE.AxesHelper(3)
    scene.add(axesHelper);


    // 动画循环
    function animate() {
        requestAnimationFrame(animate);
        // cube.rotation.x += 0.01;
        // cube.rotation.y += 0.01;
        renderer.render(scene, camera);
    }

    animate();
});
</script>

<style scoped>
#container {
    width: 100%;
    height: 400px;
    /* 设置容器高度 */
    border: 1px solid #ccc;
    /* 可选：添加边框 */
}
</style>
